<template>
  <div class="show">
    <ul v-for="(item,index) in list" :key="index">
      <li @click="showhd(index,$event)" :class="[item.children?'color':'']">{{item.name}}</li>
      <re-component v-if="item.children" :list="item.children"></re-component>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'reComponent',
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    showhd (id,e) {
      const dom = e.target.nextElementSibling;
      if (dom.className === 'show') {
        dom.className = 'head'
      } else {
        dom.className = 'show'
      }
    }
  }

}

</script>
<style lang="less" scoped>
.show {
  display:block;
}
.ul {
  overflow:hidden;
}
.head {
  display:none;
}
.color {
  color:brown;
}
</style>
